<!--***************使用组件方法的过程******************-->
<!--1-通过import引入组件-->
<!--2-通过component:{}注册组件-->
<!--3-通过<标签></标签>引用组件-->
<!--4-通过data(){属性名:值}初始化组件属性-->
<!--5-在method:{}中注册组件的事件调用的函数方法-->
<!--6-通过外部按钮等的事件调用修改组件属性的函数方法-->
<!--7-通过import引用外部API接口-->

<template>
  <div>
    <Card>
       <Form ref="EntryOrderData" :inline="true" :model="EntryOrderData" :label-width="100">
      <row>
        <Col span="12">
          <!-- <Form ref="searchForm" :model="searchForm"> -->
            <Select v-model="searchForm.searchKey" class="search-col">
              <Option
                v-for="item in columns"
                :value="item.key"
                :key="item.key"
                >{{ item.title }}</Option
              >
            </Select>
            <Input
              v-model="searchForm.searchValue"
              @on-change="handleClear()"
              clearable
              placeholder="输入关键字搜索"
              class="search-input"
            />
            <Button @click="handleSearch()" class="search-btn" type="primary"
              ><Icon type="search" />&nbsp;&nbsp;搜索</Button
            >
         
        </Col>
        <Col span="12">
          <Steps
            :current="this.EntryOrderData.Status"
            size="small"
            class="steps"
          >
            <Step title="客户申请"></Step>
            <Step title="过磅毛重"></Step>
            <Step title="红枣检验"></Step>
            <Step title="红枣入库"></Step>
            <Step title="过磅皮重"></Step>
            <Step title="签约结算"></Step>
          </Steps>
        </Col>
      </row>

      <row>
        <!--
        <Button @click="showAdd()" style="margin-left:0px;" type="primary" icon="ios-add">新增价格</Button>
        <Button @click="handleDelete()" style="margin-left:18px;" type="warning" icon="ios-trash-outline">批量删除</Button>
        <Button @click="handleRefresh()" style="margin-left:18px;" type="primary" icon="ios-refresh">刷新</Button>
        -->
        <tables
          ref="tables"
          editable
          searchable
          search-place="top"
          v-model="tableData"
          :columns="columns"
          :pageTotal="pageTotal"
          :page="page"
          :border="border"
          :stripe="stripe"
          :rows="rows"
          :loading="loading"
          @on-PageSize="changePageSize"
          @on-change="changePage"
          @on-delete="handleDelete"
        />
        <Button style="margin: 10px 0" type="primary" @click="exportExcel"
          >导出为Csv文件</Button
        >
      </row>
       </Form>
      <!--3-使用Detail组件-->
      <UserDetail
        v-if="viewAccessAll"
        v-bind:visible="visible"
        v-bind:EntryOrderData="EntryOrderData"
        @cancelCallBack="shutDetailModal"
      ></UserDetail>
      <!--3-使用Edit组件-->
      <Edit
        v-if="viewAccessSuper"
        v-bind:edit="edit"
        v-bind:EntryOrderData="EntryOrderData"
        @success="editSuccess"
        @cancelCallBack="shutEditModal"
      ></Edit>
      <!--3-使用UserAdd组件
      <Add v-if="viewAccessSuper1"  v-bind:add = "add" v-bind:EntryOrderData="EntryOrderData" @success="success"  @cancelCallBack="shutAddModal"></Add>
      -->
    </Card>
  </div>
</template>


<script>
import Tables from "_c/tables"; //1-引入Tables组件
import UserDetail from "./orders_detail.vue"; //1-引入UserDetail组件
import Edit from "./entry_weight_oper.vue"; //1-引入UserEdit组件
import Add from "./orders_add.vue"; //1-引入UserAdd组件
import {
  getAllEntryOrders,
  getOneEntryOrder,
  searchEntryOrderData,
} from "@/api/data";
export default {
  name: "tables_page",
  components: {
    //注册组件
    Tables, //2-将引入的Tables组件进行注册
    UserDetail, //2-将引入的Detail组件进行注册
    Edit, //2-将引入的Edit组件进行注册
    Add, //2-将引入的Add组件进行注册
  },
  data() {
    return {
      //4-初始化组件属性值
      pageTotal: 100,
      page: 1,
      rows: 10,
      loading: false,
      border: true,
      stripe: true,
      viewAccessAll: false,
      viewAccessSuper: false,
      viewAccessSuper1: false,
      edit: true,
      visible: true,
      add: true,
      searchForm: {
        searchValue: "",
        searchKey: "CompanyName",
      },
      EntryOrderData: {
        // Id: 1,
        // OrderNo: "60100011201901180000000568",
        // ApplyTime: "2019-08-01",
        // CustomerName: "阿拉尔市十一团蜜园果品农民专业合作社",
        // LinkTelephone: "13150282772",
        // BankName: "阿拉尔市十一团蜜园果品农民专业合作社",
        // BankAccount: "852011912010101347308",
        // Carrier: "",
        // CarrierTelephone: "",
        // VehicleNo: "新NB8589",
        // RoughWeightTime: "2019-10-02 15:20:00",
        // RoughWeight: 32720,
        // SkinWeightTime: "2019-10-02 18:20:00",
        // SkinWeight: 0,
        // NetWeight: 0,
        // CheckTime: "",
        // CheckTypeFst: "灰枣特级",
        // CheckTypeFstId: 1,
        // CheckFstCount: 1500,
        // CheckFstDlvCount: 0,
        // CheckFstRemCount: 0,
        // CheckTypeSec: "",
        // CheckTypeSecId: 2,
        // CheckSecCount: 1500,
        // CheckSecDlvCount: 0,
        // CheckSecRemCount: 0,
        // CheckTypeThd: "",
        // CheckTypeThdId: 2,
        // CheckThdCount: 200,
        // CheckThdDlvCount: 0,
        // CheckThdRemCount: 0,
        // CheckPack: "箱装",
        // CheckPackId: 1,
        // UnitWeight: 13,
        // UnitPrice: 5.0,
        // SugarRate: 0,
        // ImpurityRate: 0,
        // WaterRate: 0,
        // InsectRate: 0,
        // LandingPlaceFstId: 0,
        // LandingPlaceFst: "",
        // LandingPlaceSecId: 0,
        // LandingPlaceSec: "",
        // LandingPlaceThdId: 0,
        // LandingPlaceThd: "",
        // Status: 1,
      },
      columns: [
         { type: 'selection',width: 60,align: 'center'},
        { title: "序号", key: "Id", width: 70, align: "center", sortable: true },
        { title: "单据号", key: "OrderNo", width: 210, align: "center" },
        { title: "客户名称", key: "CustomerName", width: 260, align: "center" },
        {
          title: "毛重时间",
          key: "RoughWeightTime",
          width: 150,
          align: "center",
        },
        { title: "毛重", key: "RoughWeight", align: "center" },
        {
          title: "皮重时间",
          key: "SkinWeightTime",
          width: 150,
          align: "center",
        },
        { title: "皮重", key: "SkinWeight", align: "center" },

        {
          title: "操作",
          key: "action",
          align: "center",
          width: 180,

          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small",
                  },
                  style: {
                    marginRight: "5px",
                  },
                  on: {
                    click: () => {
                      //6-通过按钮的单击事件---修改组件属性及调用相关函数方法
                      this.viewAccessAll = true;
                      this.visible = true;
                      this.entryOrderId = params.row.Id;
                      this.getEntryOrder();
                    },
                  },
                },
                "详情"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "error",
                    size: "small",
                  },
                  on: {
                    click: () => {
                      this.viewAccessSuper = true;
                      this.edit = true;
                      this.entryOrderId = params.row.Id;
                      console.log("打印行号", this.entryOrderId);
                      this.getEntryOrder();
                    },
                  },
                },
                "过磅"
              ),
            ]);
          },
        },
      ],

      tableData: [
        {
          Id: 1,
          OrderNo: "60100011201901180000000568",
          CustomerName: "阿拉尔市十一团蜜园果品农民专业合作社",
          LinkTelephone: "13150282772",
          BankName: "阿拉尔市十一团蜜园果品农民专业合作社",
          BankAccount: "852011912010101347308",
          PlanType: "灰枣",
          PlanCount: 1500,
          PlanPack: "箱装",
          RoughWeightTime: "2019-08-01 16:20:00",
          RoughWeight: 32720,
          SkinWeightTime: "2019-08-01 18:20:00",
          SkinWeight: 12840,
          CheckType: "灰枣",
          CheckClass: "均级",
          CheckPack: "箱装",
          CheckCount: 1446,
          UnitWeight: 13,
          UnitPrice: 5.0,
          SumMoney: 93990.0,
          RealMoney: 37596.0,
          Rate: 0.4,
          LandingPlace: "场地1",
        },

        {
          Id: 2,
          OrderNo: "60100011201901180000000568",
          CustomerName: "阿拉尔市十一团蜜园果品农民专业合作社",
          LinkTelephone: "13150282772",
          BankName: "阿拉尔市十一团蜜园果品农民专业合作社",
          BankAccount: "852011912010101347308",
          PlanType: "灰枣",
          PlanCount: 1500,
          PlanPack: "箱装",
          RoughWeightTime: "2019-08-01 16:20:00",
          RoughWeight: 32720,
          SkinWeightTime: "2019-08-01 18:20:00",
          SkinWeight: 12840,
          CheckType: "灰枣",
          CheckClass: "均级",
          CheckPack: "箱装",
          CheckCount: 1446,
          UnitWeight: 13,
          UnitPrice: 5.0,
          SumMoney: 93990.0,
          RealMoney: 37596.0,
          Rate: 0.4,
          LandingPlace: "场地1",
        },

        {
          Id: 3,
          OrderNo: "60100011201901180000000568",
          CustomerName: "阿拉尔市十一团蜜园果品农民专业合作社",
          LinkTelephone: "13150282772",
          BankName: "阿拉尔市十一团蜜园果品农民专业合作社",
          BankAccount: "852011912010101347308",
          PlanType: "灰枣",
          PlanCount: 1500,
          PlanPack: "箱装",
          RoughWeightTime: "2019-08-01 16:20:00",
          RoughWeight: 32720,
          SkinWeightTime: "2019-08-01 18:20:00",
          SkinWeight: 12840,
          CheckType: "灰枣",
          CheckClass: "均级",
          CheckPack: "箱装",
          CheckCount: 1446,
          UnitWeight: 13,
          UnitPrice: 5.0,
          SumMoney: 93990.0,
          RealMoney: 37596.0,
          Rate: 0.4,
          LandingPlace: "场地1",
        },
      ],
    };
  },

  methods: {
    handleDelete(params) {
      console.log(params);
    },

    handleClear() {},
    //刷新列表
    handleRefresh() {
      this.searchForm.searchValue = "";
      this.page = 1;
      const data = {
        page: this.page,
        rows: this.rows,
        searchKy: this.searchForm.searchKey,
        searchVal: this.searchForm.searchValue,
        step: 2,
      };
      searchEntryOrderData(data).then((res) => {
        this.tableData = res.List;
        this.pageTotal = res.Total;
        console.log(res.data);
      });
    },

    //按条件查询用户信息
    handleSearch() {
      this.page = 1;
      const data = {
        page: this.page,
        rows: this.rows,
        searchKy: this.searchForm.searchKey,
        searchVal: this.searchForm.searchValue,
        step: 2,
      };
      searchEntryOrderData(data).then((res) => {
        this.tableData = res.List;
        this.pageTotal = res.Total;
        console.log(res.data);
      });
    },

    //页码改变：按页码 + 每页行数 + 上面查询条件组合查询
    changePage(val) {
      console.log("改变了页码：", val);
      this.page = val;
      const data = {
        page: this.page,
        rows: this.rows,
        searchKy: this.searchForm.searchKey,
        searchVal: this.searchForm.searchValue,
        step: 2,
      };
      searchEntryOrderData(data).then((res) => {
        this.tableData = res.List;

        console.log(res.data);
      });
    },

    //每页行数改变：按页码 + 每页行数 + 上面查询条件组合查询
    changePageSize(val) {
      console.log("改变每页条数：", val);
      this.rows = val;
      const data = {
        page: this.page,
        rows: this.rows,
        searchKy: this.searchForm.searchKey,
        searchVal: this.searchForm.searchValue,
        step: 2,
      };
      searchEntryOrderData(data).then((res) => {
        this.tableData = res.List;

        console.log(res.data);
      });
    },

    showAdd() {
      //6-通过按钮的单击事件---修改组件属性及调用相关函数方法--弹出界面
      this.viewAccessSuper1 = true;
      this.add = true;
      console.log("弹出增加对话框");
      //this.getUserEmpt();
    },

    shutDetailModal(data) {
      //5-将modal对话框的visible属性通过on-cancel事件设置为false
      this.visible = data.mode;
    },
    shutEditModal(data) {
      //5-modal对话框的visible属性通过on-cancel事件设置为false
      this.edit = data.mode;
    },
    shutAddModal(data) {
      //5-modal对话框的visible属性通过on-cancel事件设置为false
      this.add = data.mode;
    },
    //添加用户信息成功
    success(data) {
      this.add = data.mode;
      const para = {
        page: this.page,
        rows: this.rows,
        step: 2,
      };
      getAllEntryOrders(para).then((res) => {
        this.tableData = res.List;
        this.pageTotal = res.Total;
        console.log(res.List);
      });
    },
    //修改用户信息成功
    editSuccess(data) {
      this.edit = data.mode;
      const para = {
        page: this.page,
        rows: this.rows,
        step: 2,
      };
      getAllEntryOrders(para).then((res) => {
        this.tableData = res.List;
        this.pageTotal = res.Total;
        console.log(res.List);
      });
    },

    exportExcel() {
      this.$refs.tables.exportCsv({
        filename: `table-${new Date().valueOf()}.csv`,
      });
    },

    //按ID获取单个用户信息
    getEntryOrder() {
      getOneEntryOrder({
        entryOrderId: this.entryOrderId,
      }).then((res) => {
        this.EntryOrderData = res.EntryOrder;
        console.log("返回:", this.EntryOrderData);
      });
    },
  },

  //打开页面后自动加载方法列表
  mounted() {
    const para = {
      step: 2,
    };
    getAllEntryOrders(para).then((res) => {
      this.tableData = res.List;
      this.pageTotal = res.Total;
      console.log(res.List);
    });
  },
};
</script>

<style>
.search {
  margin-bottom: 10px;
  margin-left: 0px;
}
.search-col {
  display: inline-block;
  width: 200px;
}

.search-input {
  display: inline-block;
  width: 200px;
  margin-left: 2px;
}

.search-btn {
  margin-left: 50px;
  width: 80px;
}

.steps {
  margin-top: 10px;
  width: 100%;
}
</style>
